<script>
  import {
    beforeUpdate,
    afterUpdate
  } from "svelte";

  import anime from "animejs";
  import Swiper, { Navigation, Pagination, Autoplay } from "swiper";

  export let name, name2;
  let baseUrl = window.location.pathname;
  let myAnimation;

  let image_url = baseUrl + "img/favicon.png";

  window.onload = function() {
// ...the DOM is now in sync with the data
    myAnimation = anime({
      targets: ".bg11",
      easing: "linear",
      "-webkit-mask-position-y": "0px",
      duration: 1000,
      delay: 1000,
      autoplay: false,
      loop: false
    });
    Swiper.use([Autoplay, Navigation, Pagination]);
    window.myswiper = new Swiper(".swiper", {
      autoplay: false, //可选选项，自动滑动,
      direction: "vertical",
      on: {
        init: function() {
          myAnimation.play();
          console.log("swiper initialized");
        },
        transitionEnd: function() {
          console.log("end");
        }
      }
    });

  };

  function handleClick () {
    myAnimation.play();
  }

  afterUpdate(() => {
    // myAnimation.play();
  });
</script>
<svelte:head>
  <title>显示app名字</title>
  <meta charset="UTF-8" />
  <meta
    content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
    name="viewport"
  />
  <meta content="telephone=no, email=no" name="format-detection" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="black" ame="apple-mobile-web-app-status-bar-style" />
  <meta content="no-transform" http-equiv="Cache-Control" />
  <meta content="no-siteapp" http-equiv="Cache-Control" />
</svelte:head>


<!-- 内容区 start -->

<!-- <main class="main1">
    <h1 >{name}：{name2}!</h1>
    <div class="txt1" on:click={handleClick}>
        <img src={baseUrl+"img/favicon.png"} alt="favicon" />
    </div>
</main> -->
<div class="swiper">
  <div class="swiper-wrapper" style="width: 100%;height: 100vh; textAlign:center">
    <div class="swiper-slide" style="width: 100%;height: 100%;textAlign: center">
      <div class="page0">
        <img class="bg1" src={"./img/page0-bg.gif"} alt="favicon" />
        <img class="bg11" src={"./img/page0-1.png"} alt="favicon" />
        <div class="now1">设置一下看看</div>
      </div>
    </div>
    <div class="swiper-slide" style="width:100%;height: 100%; textAlign: center">
      <div class="page0">
        dsfs
      </div>
    </div>
    <div class="swiper-slide" style="width: 100%;height:100%; textAlign:center">
      <div class="page0"></div>
    </div>
  </div>
  <!-- <div class="swiper-pagination"></div> -->
  <!-- <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div> -->
</div>

<!-- 内容区 end -->

<!-- style里面如果使用背景图片 那就需要放到html里的css -->
<style>
  .now1 {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    background-image: url('../img/favicon.png')
  }
</style>
